<template>
	<view class="content">
		<image src="/static/bg.png" mode="" class="box-bg"></image>
		<navBack />
		<view class="card" v-for="item in receiptsList">
			<view class="_title_">
				{{item.position}} <text>住宅</text>
			</view>

			<view class="lable">
				<view class="">
					收据金额
				</view>
				<view class="">
					￥{{item.amount}}
				</view>
			</view>
			<view class="lable">
				<view class="">
					缴费日期
				</view>
				<view class="">
					{{$u.timeFrom(new Date(item.paymentTime).getTime(), 'yyyy-mm-dd') }}
				</view>
			</view>
			<view class="lable">
				<view class="">
					收据
				</view>
				<view class="btn-text" @click="receiptsDetails(item.id)">
					查看收据
				</view>
			</view>
		</view>
		
		<view class="empty" v-if="!receiptsList.length">
			<image src="/static/empty.png" mode=""></image>
			<view class="">
				空空如也
			</view>
		</view>
		<Loading/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				receiptsList: [],
				pageIndex: 1,
				id:''
			};
		},
		onLoad(e) {
			this.id=e.id
			this.upData()
		},
		onReachBottom() {
			this.upData()
		},
		methods: {
			upData() {
				if (!this.pageIndex) return uni.showToast({
					title: '没有更多了！',
					icon:'none'
				});
				let data = {
					pageIndex: this.pageIndex,
					houseId:this.id||''
				}
				this.$myRequest('/api/receipts', data).then(res => {
					if (res.data.length == res.pageSize) {
						this.pageIndex++
					} else {
						this.pageIndex = 0
					}
					this.receiptsList.push(...res.data)
				})
			},
			receiptsDetails(id){
				this.$myRequest(`api/receipts/GetReceipt/${id}`)
			}
		}
	}
</script>

<style lang="less">
	.content {
		padding-top: 160rpx;
		background-color: #f5f5f5;
		min-height: calc(100vh - 160rpx);
	}

	.card {
		padding: 20rpx;
		margin: 0 20rpx 20rpx 20rpx;
	}

	._title_ {
		text {
			white-space: nowrap;
			color: #FF4A4A;
			background-color: rgba(255, 74, 74, .22);
			padding: 2rpx 16rpx;
			border-radius: 4rpx;
			margin-left: 12rpx;
		}
	}
</style>
